Посоветуйте, пожалуйста, пару grunt плагинов для следующих задач:
1) Имеется следующая файловая структура:
news/
red/
news/news.scss
blue/
news/news.scss
green/
news/news.scss
app/
app.scss
red/
blue/
green/
Нужен плагин, делающий следующее: плагину скармливаем список имеющихся тем. Затем этот плагин для каждой темы из списка запускает следующую операцию:
плагин берет файл app.scss, подгружает в него файл news.scss для текующей в цикле темы, затем компилирует результирующий scss файл и кладет получившийся css файл в папку текущей темы
из цикла. Таким образом один раз запустив этот плагин мы получим css файлы для всех тем:
app/
app.scss
red/
app.css
blue/
app.css
green/
app.css
2) Например, у меня есть стили
.news{
font-size:10px;
color:red;
border:1px red solid;
}
.news{
color:blue;
border-width:20px;
}
Нужен плагин, делающий следующее: берет этот css файл и объединяет стили из одинаковых селекторов(в данном примере это селектор .news), то есть на выходе мы получаем:
.news{
font-size:10px;
color:blue;
border:20px red solid;
}
3) Нужен плагин, делающий следующее: имеется следующая структура:
news/
news/
news.scss
news.png
menu/
menu.scss
menu.png
в файле news.scss следующие стили:
.news{
background: url(news.png);
}
а в файле menu.scss следующие стили:
.menu{
background: url(menu.png);
}
плагин берет изображения news.png и menu.png и объединяет их в один спрайт, а в файлах news.scss и menu.scss и заменяет фоновое изображение на изображение из спрайта и плюс
ещё и добавляет в свойство baclground позицию сдвига в спрайте, то есть получаем вот такие стили для news.scss:
.news{
background: url(sprite.png) 100px 20px;
}
4) Нужен плагин, делающий следующее: имеет стили:
.news{
position:absolute;
top:0;
left:10px;
text-align:left;
}
плагин берет эти стили и заменяет все зависящие от направления(rtl или ltr) свойства на противоположные, то есть, если это были ltr свойства, то станет rtl, например news получится
следующим:
.news{
position:absolute;
top:0;
right:10px;
text-align:right;
}
Заранее благодарю.
